<template>
  <div class="flex flex-col gap-2 bg-[var(--el-bg-color-overlay)] p-6">
    <div class="flex items-center justify-between text-gray-500">
      <span>{{ props.title }}</span>
    </div>
    <div class="flex flex-row items-baseline justify-between">
      <CountTo
        :prefix="props.prefix"
        :end-val="Number(props.value)"
        :decimals="Number(props.decimals)"
        class="text-3xl"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'

/** 交易汇总卡片 */
defineOptions({ name: 'TradeSummaryCard' })

const props = defineProps({
  title: propTypes.string.def('').isRequired,
  value: propTypes.number.def(0).isRequired,
  prefix: propTypes.string.def(''),
  decimals: propTypes.number.def(0)
})
</script>
